/*
选择器的种类:

后代选取器(以空格分隔) 例如: #nav ur li{}
子元素选择器(以大于号分隔）例如: div>p{} 选中div下面所有的p元素
相邻兄弟选择器（以加号分隔）例如:div+p{} 选择div后面的第一个p元素
普通兄弟选择器（以破折号分隔）例如:div~p{} 所有 <div> 元素的所有相邻兄弟元素 <p> 
多元素选择器(逗号隔开) #nav ul li,#dropBtn{} 选择li和ID为dropBtn元素

*/

#nav{
    width:768px;
    margin:0 auto;    
    box-shadow: 0px 4px 8px 0px #000000;    
}
#nav ul{
    list-style:none;
    padding:0;
    margin:0;
    text-align:center;
    background-color:#000000;
}
#nav ul li{
    display:inline;
    
}
/*逗号隔开的是多元素选择器*/
#nav ul li a,#dropBtn{
    display:inline-block;
    color:#ffffff;
    text-align:center;
    padding:12px 16px;
    font-weight:bold;
    text-decoration:none;
}

#nav ul li a:hover,#dropBtn:hover{
    color:#000000;
    background-color:#ffffff;
    box-shadow: 0px 4px 4px 0px #ffffff; 
}

.dropdown{
    display:inline;
    position:relative;
}

#dropBtn{
    display:inline-block;
    
}

.dropdown-content{
    display:none;
    position:absolute;
    left:0px;
    top:18px;
    width:100px;
    background-color:#ffffff;
    box-shadow: 0px 8px 16px 0px #000000;
    z-index:900;
}

.dropdown-content a{
    color:#000000;
    display:block;
    font-weight:bold;
    line-height:35px;
}

.dropdown:hover .dropdown-content{
    display:block;
}

#content{    
    width:768px;
    margin:0 auto;
    background-image:url("../img/00003.png");
    background-repeat:no-repeat;
    background-color:#cccccc;
    height:1000px;
}

#imgContent{
    background-color:#cccccc;
    width:450px;
    position:relative;
    left:80px;
}

.img1{
    
    opacity:1; /*设置透明度*/
}
.img1:hover{
    opacity:0.7;
    filter:alpha(opacity=100); /* For IE8 and earlier */
    /*box-shadow: 0px 8px 16px 0px #f6c87b;*/
}
#content .desc{
    position:relative;
    top:20px;
    width:200px;
    background-color:#ffffff;
    opacity:0.6;
    border:1px solid #ff0000;
    
}

#navlist{
    position:relative;
}
#navlist li{
    margin:0;
    padding:0;
    list-style:none;
    position:absolute; /**定位非常关键**/
    top:0;
}
#navlist li, #navlist a{
    height:48px;
    display:block;
} /*设置统一高度*/

/**下面对图片进行切片处理**/

#home{
    left:0px;
    width:48px;
}
#home{
    background:url('../img/nav.png') 0 0;
}

#prev{
    left:49px;width:48px;
}
#prev{
    background:url('../img/nav.png') -49px 0; /*设置切片图片位置[left,top] 负数表示从左上角往右移动的像素; 同理负数是向下移动*/
}

#next{
    left:98px;
    width:48px;
 }
#next{
    background:url('../img/nav.png') -98px 0;
}







